<template>
    <div class="recommend">
        <h3>每日新鲜推荐</h3>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="(item,index) in playlists" :key="index">
                    <div class="imgs">
                    <img class="cover" :src="item.coverImgUrl">
                    <span>{{item.playCount |numFilter(0)}}</span>
                    </div>
                    <span class="title">{{item.name}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import{betterScrollHorizontal} from '../../../common/betterScroll'
export default {
    data(){
        return{
            playlists:[]
        }
    },
    created(){
        this.getListData()
    },
    methods:{
        getListData(){
            this.$request("get","/top/playlist?cat=流行&order=hot&limit=6")
                .then(res=>{
                    this.playlists = res.playlists;
                    betterScrollHorizontal(this,this.$refs.wrapper,this.$refs.content,this.playlists.length,10)//调用横向滚动的方法
                    // console.log(this.listData)
                })
        },
    },filters:{
    //处理播放量的格式
    /**
     * param num:小数位固定位数
     * value::处理的数值
     */
    numFilter(value,num){
        return parseFloat(value/10000).toFixed(num)+" 万"
    }
}
    
}
</script>
<style scoped>
.songs-tuijian h3{
    text-align: start;
    padding-left: 1rem;
    font-weight:700;
}
.wrapper{
    width: 100%;
    overflow: hidden;
}
ul.content{
  width:calc(6*8)rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
ul.content li{
    width: 8rem;
    display: inline-block;
    vertical-align: top;
    padding: 0.5rem;
}
ul.content li > span{
    color:black;
}
.imgs{
    position: relative;
}
.cover{
    position: relative;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    border-radius: 1rem;
    
}
.imgs span{
  position: absolute;
  color: white;
  font-size: smaller;
  font-weight: bold;
  top:5px;
  right: 5px;
  background-color: rgb(171, 165, 165);
  border-radius: 1rem;
  padding: 0.2rem;
}
/*
display: -webkit-box;定义为盒子模型显示
  overflow: hidden;超出盒子部分隐藏
  text-overflow: ellipsis;超出部分用...表示
  -webkit-line-clamp: 2;超出两行隐藏
  -webkit-box-orient: vertical;从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
 */
.title{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
